<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入样式 -->
<style>
    .container {
        width: 100%;
    }
</style>

<div id="member-add-app" class="addBrand-container">
    <div class="container">
        <form class="el-form demo-ruleForm">
            <div class="el-form-item is-required">
                <label for="usernameId" class="el-form-item__label" style="width: 180px;">账号:</label>
                <div class="el-form-item__content" style="margin-left: 180px;">
                    <div class="el-input">
                        <input type="text" autocomplete="off" placeholder="请输入账号" maxlength="20" class="el-input__inner" id="usernameId">
                    </div>
                </div>
            </div>
            <div class="el-form-item is-required">
                <label for="passwordId" class="el-form-item__label" style="width: 180px;">密码:</label>
                <div class="el-form-item__content" style="margin-left: 180px;">
                    <div class="el-input">
                        <input type="password" autocomplete="off" placeholder="请输入密码" maxlength="20" class="el-input__inner"id="passwordId">
                    </div>
                </div>
            </div>
            <div class="el-form-item is-required">
                <label for="nameId" class="el-form-item__label" style="width: 180px;">姓名:</label>
                <div class="el-form-item__content" style="margin-left: 180px;">
                    <div class="el-input">
                        <input type="text" autocomplete="off" placeholder="请输入姓名" maxlength="20" class="el-input__inner" id="nameId">
                    </div>
                </div>
            </div>
            <div class="el-form-item is-required">
                <label for="phoneId" class="el-form-item__label" style="width: 180px;">手机号:</label>
                <div class="el-form-item__content" style="margin-left: 180px;">
                    <div class="el-input">
                        <input type="text" autocomplete="off" placeholder="请输入手机号" maxlength="20" class="el-input__inner"id="phoneId">
                    </div>
                </div>
            </div>
            <div class="el-form-item">
                <label for="genderId" class="el-form-item__label" style="width: 180px;">性别:</label>
                <div class="el-form-item__content" style="margin-left: 180px;" >
                    <div class="el-form-item__content" id="genderId">
                        <label class="radio-inline">
                            <input type="radio" name="typeId" value="1" checked> 男 </label>
                        <label class="radio-inline">
                            <input type="radio" name="typeId" value="2"> 女 </label>
                    </div>
                </div>
            </div>
            <div class="el-form-item is-required">
                <label for="roleIds" class="el-form-item__label" style="width: 180px;">角色:</label>
                <ul class="roles-ul" style="margin: 10px;" id="roleIds"></ul>
            </div>
            <div class="subBox address">
                <div class="el-form-item">
                    <div class="el-form-item__content" style="margin-left: 180px;">
                        <button type="button" class="el-button el-button--default">
                            取消
                        </button>
                        <button type="button" class="el-button el-button--primary">
                            保存
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="api/member/member.js"></script>
<script>
    $(function (){
        loadRolesData();//初始加载角色数据
        $(".address").on('click','.el-button--default',cancelToUserList)
                     .on('click','.el-button--primary',preservationUser);
    })
    //添加或修改用户
    function preservationUser(){
        debugger
        //判断名字，账号，电话号码，性别不能为空
        var username = $("#usernameId").val();
        var password = $("#passwordId").val();
        var name = $("#nameId").val();
        var phone = $("#phoneId").val();
        var gender = $("input[type='radio']:checked").val();
        var roles =$(".role-li input[type='checkbox']:checked");
        var roleIds = [];
        for(var i = 0; i <roles.length;i++){
            var rid = $(roles[i]).val();
            roleIds.push(rid.replace("role",""));
        }
        if(!username || !password || !roles){
            debugger
            commonShowTips("请将数据填写完整")
            return
        }
        var params = {
            username : username,
            password : password,
            name : name,
            phone : phone,
            gender : gender,
            roleIds : roleIds
        }
        var url = !$("#cIframe").data("userId") ? "user/addUser" : "user/updateUser";
        if ($("#cIframe").data("userId")){
            params.id = $("#cIframe").data("userId");
        }
        $.get(url,params,function(result){
            commonShowTips(result.message)
        })
    }
    //初始加载角色数据
    function loadRolesData(){
        var url = "role/findAllRole";
        $.get(url,{},function (result){
            result = result.data;
            for(var i in result){
                var id = result[i].id;
                var str ="<li class='role-li' style='list-style-type: none ;float: left' >"
                    + "<input type='checkbox' value='role"+ id + "' id='role"+ id + "'>"
                    + "<label for='role"+ id +"'>" + result[i].name + "</label></li>"
                $(".roles-ul").append(str)
            }
            if ($("#cIframe").data("userId")){
                //如果是修改就填充数据
                initUpdataUserData();
            }
        })
    }
    //修改
    function initUpdataUserData() {
        var user = $("#cIframe").data("user");
        $("#usernameId").val(user.username);
        $("#passwordId").val(user.password);
        $("#nameId").val(user.name);
        $("#phoneId").val(user.phone);
        $($("input[name='typeId']")[user.gender -1]).prop("checked",true)
        var param = {userId:$("#cIframe").data("user").id}
        //通过userId查找角色
        $.get("user/findRoleUserById",param,function (result){
            var roleIds = result.data;//拿到所有角色id
            for (var i = 0;i < roleIds.length;i++){
                $(".roles-ul #role" + roleIds[i] + "").prop("checked", "checked")
            }
        })
        //把用户名和密码设置为只读
        $("#passwordId, #usernameId").attr("readonly", "readonly");
    }
    //返回数据展示页面
    function cancelToUserList(){
        //把绑定的id清空
        $("#cIframe").data("userId","");
        $("#cIframe").load("user/list");
    }
</script>